import { useState } from 'react';
import { X, Clock, Film, ArrowRightLeft } from 'lucide-react';
import { Transition } from '@/types/video';

interface TransitionsPanelProps {
  className?: string;
  transitions: Transition[];
  onAddTransition: (transitionType: string) => void;
  onRemoveTransition: (transitionId: string) => void;
  onUpdateTransition: (transitionId: string, updates: Partial<Transition>) => void;
}

const TransitionsPanel: React.FC<TransitionsPanelProps> = ({
  className,
  transitions,
  onAddTransition,
  onRemoveTransition,
  onUpdateTransition
}) => {
  const [activeTransition, setActiveTransition] = useState<string | null>(null);

  // 转场预设
  const transitionPresets = [
    {
      id: 'fade',
      name: '淡入淡出',
      icon: Film,
      description: '平滑的淡入淡出效果',
      minDuration: 0.5,
      maxDuration: 3
    },
    {
      id: 'slide',
      name: '滑动效果',
      icon: ArrowRightLeft,
      description: '左右滑动转场',
      minDuration: 0.5,
      maxDuration: 3
    },
    {
      id: 'dissolve',
      name: '溶解效果',
      icon: Clock,
      description: '交叉溶解效果',
      minDuration: 0.5,
      maxDuration: 3
    }
  ];

  const renderTransitionControls = (transitionId: string) => {
    const transition = transitions.find(t => t.id === transitionId);
    if (!transition) return null;

    return (
      <div className="transition-controls">
        <div className="control-group">
          <label className="control-label">持续时间 (秒)</label>
          <div className="duration-controls">
            <input
              type="range"
              min="0.5"
              max="3"
              step="0.1"
              value={transition.duration}
              onChange={e => onUpdateTransition(transitionId, {
                duration: Number(e.target.value)
              })}
              className="duration-slider"
            />
            <span className="duration-value">{transition.duration} 秒</span>
          </div>
        </div>

        <div className="control-group">
          <label className="control-label">位置</label>
          <div className="position-controls">
            <button
              className={`position-btn ${transition.position === 'start' ? 'active' : ''}`}
              onClick={() => onUpdateTransition(transitionId, { position: 'start' })}
            >
              开始
            </button>
            <button
              className={`position-btn ${transition.position === 'end' ? 'active' : ''}`}
              onClick={() => onUpdateTransition(transitionId, { position: 'end' })}
            >
              结束
            </button>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className={`transitions-panel ${className || ''}`}>
      <div className="panel-header">
        <h3 className="panel-title">
          <ArrowRightLeft size={20} />
          转场效果
        </h3>
        <p className="panel-description">为剪辑添加转场效果</p>
      </div>

      {/* 转场列表 */}
      <div className="transitions-list">
        {transitions.map(transition => {
          const preset = transitionPresets.find(p => p.id === transition.type);
          const PresetIcon = preset?.icon || Film;
          
          return (
            <div key={transition.id} className="transition-item">
              <div 
                className="transition-header"
                onClick={() => setActiveTransition(activeTransition === transition.id ? null : transition.id)}
              >
                <div className="transition-info">
                  <div className="transition-icon">
                    <PresetIcon size={16} />
                  </div>
                  <div className="transition-details">
                    <span className="transition-name">{preset?.name || transition.name}</span>
                    <span className="transition-duration">{transition.duration} 秒</span>
                  </div>
                </div>
                <div className="transition-actions">
                  <button
                    className="remove-btn"
                    onClick={(e) => {
                      e.stopPropagation();
                      onRemoveTransition(transition.id);
                    }}
                  >
                    <X size={14} />
                  </button>
                </div>
              </div>
              
              {activeTransition === transition.id && (
                <div className="transition-controls-wrapper">
                  {renderTransitionControls(transition.id)}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* 添加转场按钮 */}
      <div className="add-transitions">
        <h4 className="add-title">添加转场</h4>
        <div className="transitions-grid">
          {transitionPresets.map(preset => {
            const PresetIcon = preset.icon;
            
            return (
              <button
                key={preset.id}
                className="transition-preset-btn"
                onClick={() => onAddTransition(preset.id)}
                title={preset.description}
              >
                <div className="preset-icon">
                  <PresetIcon size={20} />
                </div>
                <span className="preset-name">{preset.name}</span>
                <span className="preset-duration">{preset.minDuration}-{preset.maxDuration}秒</span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default TransitionsPanel;